<template>
  <view>
    <u-modal
      width="474rpx"
      @close="close"
      closeOnClickOverlay
      :show="value"
      :showConfirmButton="false"
      :title="title"
    >
      <view class="u-swiper__wrapper__item__wrapper_div">
        <view
          style="
            display: flex;
            justify-content: center;
            width: 100%;
            flex-direction: row;
            align-items: center;
          "
        >
          <image
            :src="showRole.avatar_url"
            mode="aspectFit"
            style="
              width: 60rpx;
              height: 60rpx;
              border-radius: 50%;
              margin-right: 24rpx;
              align-items: center;
            "
          ></image>
          <view style="font-size: 36rpx; font-weight: 700">{{ showRole.name }}</view>
        </view>
        <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
        <image
          v-if="showtext"
          :src="showRole.cover_url"
          mode="heightFix"
          :style="{
            height: 904 + 'rpx',
            width: '100%',
          }"
        ></image>
        <view
          @click="botClick"
          :style="{ fontSize: !showtext ? '28rpx' : '24rpx' }"
          :class="{ hideTxt: showtext }"
        >
          {{ showRole.desc }}
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  options: {
    styleIsolation: 'shared',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      showRole: {},
      title: '',
      showtext: true,
    }
  },
  computed: {
    ...mapState({
      item: (state) => state.chatAI.systemRole2,
      modelList: (state) => state.chatAI.modelList,
    }),
    showRole2: function () {
      return this.value
    },
  },
  watch: {
    showRole2: {
      handler(val) {
        console.log('store', this.$store.state.chatAI.systemRole2)
        console.log('this.item.model', this.item.model)
        console.log('this.item', this.item)
        console.log('ilist', this.modelList)
        if (val) {
          if (!this.item.model && !this.item.id) {
            this.$emit('input', false)
          }
          if (this.item.id && !this.item.model) {
            this.showRole = this.item
            return
          }
          this.showRole = this.modelList.find((item) => {
            if (this.item.model) {
              if (item.id == this.item.model.id) {
                return item
              }
            }
          })
          console.log(this.showRole)
        }
      },
      deep: true,
    },
    item: {
      handler(val) {
        console.log('this.item', this.item)
        console.log('单纯监听一下item', val)
      },
      deep: true,
    },
  },
  methods: {
    close() {
      console.log('触发', this.item, this.modelList)
      this.$emit('input', false)
    },
    botClick() {
      this.showtext = !this.showtext
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .u-modal__content {
  padding: 0 !important;
  height: 1200rpx;
}
::v-deep .u-modal {
  width: 560rpx !important;
}
.u-swiper__wrapper__item__wrapper_div {
  transition-property: width;
  transition-duration: 0.8s;
  animation-timing-function: linear;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  flex: 1;
  view:nth-child(1) {
    height: 132rpx;
  }
  view:nth-of-type(2) {
    max-height: 198rpx;
    width: 100%;
    font-size: 24rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    line-height: 34rpx;
  }
}
.hideTxt {
  overflow: hidden;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
